<template>
  <div>
    <div class="search">
      <van-search
        ref="search"
        placeholder="请输入搜索关键词"
        input-align="center"
        :show-action="showSearchAction"
        @input="search(searchText)"
        @search="search(searchText)"
        @focus="handleFocus()"
      >
        <template #left>
          <div class="back" @click="toBack()">
            <van-icon name="arrow-left" size="20" />
          </div>
        </template>
        <template #action>
          <div @click="onClickButton()">取消</div>
        </template>
      </van-search>
    </div>
    <div class="recomCity" v-if="hotCityList.length">
      <div class="currentCity">当前城市</div>
      <ul>
        <li>{{ $store.state.cityName }}</li>
      </ul>
      <div class="hotCityText">热门城市</div>
      <ul>
        <li
          v-for="city in hotCityList"
          :key="city.cityId"
          @click="selectCity(city)"
        >
          {{ city.name }}
        </li>
      </ul>
    </div>
    <div class="city" v-if="cityList.length">
      <van-index-bar
        ref="indexBar"
        highlight-color="orange"
        :index-list="getIndexList"
        :sticky-offset-top="stickyOffsetTop"
        @select="handleSelect()"
      >
        <div v-for="item of cityList" :key="item.type">
          <van-index-anchor :index="item.type" />
          <van-cell
            v-for="city in item.cities"
            :key="city.cityId"
            :title="city.name"
            @click="selectCity(city)"
          ></van-cell>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import http from '@/util/http'
import isNavShow from '@/util/mixinShowNav'
import { Icon, IndexBar, IndexAnchor, Cell, Search, Toast } from 'vant'
import Vue from 'vue'
import { mapMutations } from 'vuex'

Vue.use(IndexBar).use(IndexAnchor).use(Cell).use(Search).use(Toast).use(Icon)
Toast.setDefaultOptions({ duration: 600, className: 'toast' })

export default {
  // 混入mixin是一个数组
  mixins: [isNavShow],

  data () {
    return {
      cityList: [],
      hotCityList: [],
      searchText: '',
      showSearchAction: false,
      stickyOffsetTop: 0
    }
  },
  //   created() {
  //     this.$store.commit('hideNav')
  //   },
  //   destroyed(){
  //     this.$store.commit('showNav')
  //   },
  computed: {
    getIndexList () {
      return this.cityList.map((item) => item.type)
    }
  },
  methods: {
    // 新写法mapMutations:原理见Cinemas.vue
    ...mapMutations(['changeCity']),
    renderCityList (list) {
      // console.log(list)
      this.hotCityList = list.filter((city) => city.isHot)
      // console.log(this.hotCityList)
      let newList = []
      const letterList = []
      for (let i = 0; i < 26; i++) letterList.push(String.fromCharCode(i + 65))
      letterList.forEach((letter) => {
        for (const city of list) {
          if (city.pinyin.substring(0, 1).toUpperCase() === letter) {
            newList.push(city)
          }
        }
        if (newList.length) {
          this.cityList.push({
            type: letter,
            cities: newList
          })
        }
        // console.log(newList);
        newList = []
      })
    },
    search () {
      console.log(this.searchText)
    },
    handleFocus () {
      console.log('获取焦点，显示取消按钮')
      this.showSearchAction = true
    },
    onClickButton () {
      this.showSearchAction = false
    },
    handleSelect () {
      //   console.log(this.$refs.indexBar);
      console.log(this.$refs.indexBar.activeAnchorIndex)
      if (this.$refs.indexBar.activeAnchorIndex) { Toast(this.$refs.indexBar.activeAnchorIndex) }
    },
    selectCity (city) {
      // 这里直接使用this.$store.state直接赋值，这是不规范的，因为如此每个组件都零散的设置或获取state，代码混乱
      // 并且如果不经过mutation，那么就不会被监测见后面的注释
      // this.$store.state.cityId = city.cityId
      // this.$store.state.cityName = city.name

      // 如果使用commit就会把更改state交给mutation完成，第一个参数就是mutation内的方法名，第二个参数数传入的参数
      // 如此经过mutation会被devtools监控，可以记录何时存取了Vuex的state的状态，调试也更加方便
      this.changeCity(city)
      this.$router.back()
    },
    toBack () {
      this.$router.back()
    }
  },
  mounted () {
    console.log(isNavShow)
    this.stickyOffsetTop = this.$refs.search.offsetHeight
    http({
      url: '/gateway?k=2984226',
      headers: {
        'X-Host': 'mall.film-ticket.city.list'
      }
    }).then((res) => {
      // console.log(res)
      this.renderCityList(res.data.data.cities)
      //   console.log(this.cityList);
    })
  }
}
</script>

<style lang="scss" scoped>
.back {
  margin-right: 1rem;
}
.search {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 0.0225rem 0.0225rem rgba(0, 0, 0, 0.151);
}
.recomCity {
  background: white;
  padding: 0.9375rem;
  box-shadow: 0 0.0425rem 0.425rem rgba(0, 0, 0, 0.151);
  .hotCityText,
  .currentCity {
    color: rgb(177, 177, 177);
    margin: 0.2rem 0.2rem 0.4rem 0.2rem;
  }
  ul {
    position: relative;
    li {
      display: inline-block;
      background-color: rgba(221, 221, 221, 0.623);
      font-size: 0.85rem;
      color: rgb(99, 99, 99);
      line-height: 1rem;
      padding: 0.6rem 1.8rem;
      margin: 0.4rem;
      border-radius: 10%;
    }
  }
}
.city {
  background-color: rgb(238, 238, 238);
}
</style>

<style lang="scss">
.van-toast--html,
.van-toast--text {
  min-width: 48px;
}
</style>
